<template>
	<view :style="outstyle">
		<scroll-view scroll-with-animation scroll-y :scroll-into-view="to" style="width: 100%;height: 100%;">
			<view class="dialog">
				<view v-for="(item,index) in messageList" :key="index" :id="'item-'+index" class="dialog-item">
					<view v-if="item.send_id==userinfo.user_id" class="right">
						<view class="content">
							<view v-if="item.type===0">
								{{item.message}}
							</view>
							<view v-if="item.type===1">
								<image style="max-width: 400rpx;" :src="item.message"></image>
							</view>
						</view>
						<view class="avatur">
							<image :src="userinfo.avatur"></image>
						</view>
					</view>
					<view v-else class="left">
						<view class="avatur">
							<image :src="peopleinfo.avatur"></image>
						</view>
						<view class="box">
							<view class="name">{{peopleinfo.name}}</view>
							<view class="content">
								<view v-if="item.type===0">
									{{item.message}}
								</view>
								<view v-if="item.type===1">
									<image style="max-width: 400rpx;" :src="item.message"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom">
			<view class="up">
				<view class="input">
					<input @confirm="send()" confirm-type="send" v-model="xiaoxi" style="height: 100%;font-size: 28rpx;" />
				</view>
				<view class="tuozhan">
					<view @click="changeShow()">
						<image v-if="!emojishow" style="width: 60rpx;height: 60rpx;margin-right: 20rpx;" src="../../static/chat/emoji.png"/>
						<image v-if="emojishow" style="width: 65rpx;height: 65rpx;margin-right: 20rpx;" src="../../static/chat/key.png"/>
					</view>
					<view @click="tupiansend()"><image style="width: 55rpx;height: 55rpx;margin-right: 20rpx;" src="../../static/chat/wenjian.png"/></view>
				</view>
				<view @click="send()" class="button" v-if="xiaoxi!==''">
					发送
				</view>
			</view>
			<view v-show="emojishow" class="down">
				<scroll-view scroll-y style="width: 100%;height: 100%;">
					<view class="emoji">
						<shinn-xEmoji @change="addEmoji" show="true" />
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,watch,nextTick} from "vue"
	import http from "@/utils/request.js"
	import {onLoad} from "@dcloudio/uni-app"
	onLoad((e)=>{
		uni.$emit('read',JSON.parse(e.peopleinfo).people_id)
		peopleinfo.value=JSON.parse(e.peopleinfo)
		let response1=http.post('/message/changeread',{
			send_id:peopleinfo.value.people_id,
			receive_id:userinfo.value.user_id,
			is_user_send:0
		})
		response1.then(res=>{
			if(res.data.code){
				console.log('已读')
				uni.$emit('read',peopleinfo.value.people_id)
			}
		})
		let response=http.get('/message/getmessages',{
			receive_id:String(userinfo.value.user_id),
			send_id:peopleinfo.value.people_id,
			is_user:1
		})
		response.then(res=>{
			if(res.data.code===200){
				messageList.value=res.data.data
			}
		})
	})
	let peopleinfo=ref({})
	let userinfo=ref({})
	userinfo.value=uni.getStorageSync('userinfo')
	let xiaoxi=ref('')
	let emojishow=ref(false)
	let to=ref('')
	let outstyle=ref({})
	let messageList=ref([])
	
	watch(messageList,(newval,oldval)=>{
		// 重新赋值item,延迟到dom更新之后进行，否则没效果
		nextTick(()=>{
			to.value = "item-"+(newval.length - 1)
		})
	},{
		deep:true, //深度监视
		immediate:true //初始化立即执行
	})
	watch(emojishow,(newval,oldval)=>{
		console.log(newval)
		if(newval){
			outstyle.value={
				width:'100%',
				height:'calc(92vh - 500rpx)'
			}
		}else{
			outstyle.value={
				width:'100%',
				height:'92vh'
			}
		}
		nextTick(()=>{
			to.value = "item-"+(messageList.value.length - 2)
		})
	},{
		immediate:true //初始化立即执行
	})
	
	function addEmoji(e){
		xiaoxi.value+=e
		console.log(xiaoxi.value)
	}
	function uploadimage(e){
		uni.uploadFile({
			url:'http://localhost:82/api/images/upload',
			filePath:e,
			name:'file',
			header: { "Content-Type": "multipart/form-data" },
			formData:{
				'user':userinfo.value.user_id,
				'use':'message',
				'time':Date.now()
			},
			success(res){
				const t=Date.now()
				let response=http.post('/message/addmessage',{
					send_id:userinfo.value.user_id,
					type:1,
					receive_id:'1',
					send_time:t,
					is_read:0,
					is_user_send:1,
					message:JSON.parse(res.data).imgUrl
				})
				response.then(resu=>{
					if(resu.data.code===200){
						getApp().globalData.socket.send(JSON.stringify({sendid:'u'+userinfo.value.user_id,receiveid:'p'+peopleinfo.value.people_id,type:1,message:JSON.parse(res.data).imgUrl,sendtime:t}))
						messageList.value.push({send_id:userinfo.value.user_id,message:JSON.parse(res.data).imgUrl,type:1,receive_id:peopleinfo.value.people_id,is_user_send:1,send_time:t,is_read:0})
					}
				})
			}
		})
	}
	function tupiansend(){
		uni.chooseImage({
			count:1,
			success(res){
				uploadimage(res.tempFilePaths[0])
			}
		})
	}
	function send(){
		const t=Date.now()
		const obj={
			send_id:userinfo.value.user_id,
			message:xiaoxi.value,
			type:0,
			receive_id:peopleinfo.value.people_id,
			is_user_send:1,
			send_time:t,
			is_read:0
		}
		let response=http.post('/message/addmessage',{
			send_id:userinfo.value.user_id,
			type:0,
			receive_id:'1',
			send_time:t,
			is_read:0,
			is_user_send:1,
			message:xiaoxi.value
		})
		response.then(res=>{
			if(res.data.code===200){
				getApp().globalData.socket.send(JSON.stringify({sendid:'u'+userinfo.value.user_id,receiveid:'p'+peopleinfo.value.people_id,type:0,message:xiaoxi.value,sendtime:t}))
				messageList.value.push(obj)
				xiaoxi.value=''
			}
		})
	}
	function changeShow(){
		emojishow.value=!emojishow.value
		to.value = "item-"+(messageList.value.length - 1)
	}
	getApp().globalData.socket.getMessage((res)=>{
		getApp().globalData.noreadnum--;
		messageList.value.push({send_id:JSON.parse(res.data).sendid,receive_id:JSON.parse(res.data).receiveid,send_time:JSON.parse(res.data).sendtime,message:JSON.parse(res.data).message,type:JSON.parse(res.data).type})
		let response=http.post('/message/changeread',{
			send_id:peopleinfo.value.people_id,
			receive_id:userinfo.value.user_id,
			is_user_send:0
		})
		response.then(resu=>{
			if(resu.data.code===200){
				console.log('已读')
			}
		})
	})
</script>

<style lang="scss">
	.dialog{
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		
		&-item{
			width: 100%;
			margin-bottom: 20rpx;
			
			.right{
				display: flex;
				justify-content: flex-end;
				width: 100%;
				
				.content{
					display: flex;
					align-items: center;
					justify-content: center;
					max-width: 60%;
					padding: 10rpx;
					font-size: 28rpx;
					border-radius: 20rpx;
					background-color: #fff8eb;
					margin-right: 10rpx;
				}
				
				.avatur{
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
			}
			
			.left{
				display: flex;
				justify-content: flex-start;
				max-width: 100%;
				
				.box{
					max-width: 60%;
					.name{
						color:#666666;
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}
					.content{
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						padding: 10rpx;
						border-radius: 20rpx;
						background-color: #ffffff;
					}
				}
				
				.avatur{
					margin-right: 10rpx;
					
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}
	
	.bottom{
		position: fixed;
		bottom:0;
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		background-color: #f6f6f6;
		
		.up{
			display: flex;
			align-items: center;
			width: 100%;
			
			.input{
				flex-grow: 1;
				box-sizing: border-box;
				padding: 10rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
			
			.tuozhan{
				display: flex;
				align-items: center;
			}
			
			.button{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				border-radius: 40rpx;
				background-color:#f8e177;
				letter-spacing: 0.1em;
				
				&:active{
					opacity: 0.7;
				}
			}
		}
		
		.down{
			width: 100%;
			height: 500rpx;
			animation: shang 0.5s forwards;
			
			.emoji{
				width: 100%;
			}
		}
	}
	
	@keyframes shang{
		0%{
			transform: translateY(500rpx);
		}
		100%{
			transform: translateY(0);
		}
	}
</style>
